﻿@using PersonalWebsite.DTO
@model SongMenuModel
@{
    ViewData["Title"] = "添加歌单";
    ViewData["BreadCrumb"] = "主页 / 歌曲管理 / 编辑歌单";
}
<style>
    #demo1 {
        width: 300px;
        height: 200px;
    }
</style>

@section toolbar{
    <h3>添加歌曲</h3>
}
<form class="layui-form" asp-action="Edit" asp-controller="SongMenu" method="post">
    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" asp-for="Name" lay-verify="required" placeholder="请输入歌单名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block">
            @*在此处使用自定义的check-box标签，配置项在PersonalWebsite.Helper.TagHelpers里*@
            <check-box items="ViewBag.SongMenuTags" name="tags[]"></check-box>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <input type="text" asp-for="Describe" lay-verify="required" placeholder="请输入该批次歌曲的专辑" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">歌单封面</label>
        <div class="layui-input-block">
            <input class="layui-input" type="text" asp-for="CoverImgSrc"  lay-verify="required" placeholder="请点击上传图片" autocomplete="off" />

            <div class="layui-upload" style="margin-top:20px;">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
            <input type="text" asp-for="OrderIndex" lay-verify="required|number" placeholder="歌单的显示顺序，升序排序" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-filter="*" lay-submit>保存</button>
        </div>
    </div>
</form>
@section scripts{
    <script>
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                , url: 'https://todo369.top/fileserver/api/Files' //改成您自己的上传接口
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.status > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功
                    $("#CoverImgSrc").val(res.url);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
        });
    </script>
}